<script setup lang="ts">
import {onMounted, ref} from "vue";
import myAxios from "../service/my-axios.ts";
import {dayjs, ElMessage} from "element-plus";
import * as echarts from 'echarts';

const avatarUrl = ref('')
const username = ref('')
onMounted(async () => {
  init()
  const res = await myAxios.get("/user/admin/current");
  if (res.data.code !== 0) {
    ElMessage.error(res.data.description)
    sessionStorage.clear()
  }
  avatarUrl.value = res.data.data.avatarUrl
  username.value = res.data.data.username

});
const timeValue = ref(dayjs().add(1, 'month').startOf('month'))
const Today = ref(dayjs().format('YYYY-MM-DD'))

let newUserNum = ref({
  todayNum: 0,
  yesterdayNum:0,
  monthNum:0,
  lastMonthNum:0
})

const init = () =>{
  getUserNum()
  getWeekBlog()
  getData()
  getNum()
}

const getUserNum = async () =>{
  let res = await myAxios.get("/home/countNew?date="+ Today.value)
  if(res.data.code === 0){newUserNum.value = res.data.data
    newUserNum.value.todayNum =Number(res.data.data.todayNum)
    newUserNum.value.yesterdayNum =Number(res.data.data.yesterdayNum)
    newUserNum.value.monthNum =Number(res.data.data.monthNum)
    newUserNum.value.lastMonthNum =Number(res.data.data.lastMonthNum)

    console.log(newUserNum.value)
  }
}
const countData = ref({
  userNum:Number,
  blogNum:Number,
  commentNum:Number,
  teamNum:Number
})
const countWeek = ref({
  dateList:'',
  blogList:''
})


const getData = async () =>{
  let res = await myAxios.get("/home/countData?date="+ Today.value)
  if(res.data.code === 0){
    countData.value = res.data.data
    const pieChart = echarts.init(document.getElementById('pie'));
    pieChart.setOption({title: {
        text: '30日数据新增分析',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: [
          '新增用户',
          '新增博文',
          '新增评论',
          '新增交流群',
        ]
      },
      series: [
        {
          name: '数据新增',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {
              value: countData.value.userNum,
              name: '新增用户'
            },
            {
              value: countData.value.blogNum,
              name: '新增博文'
            },
            {
              value: countData.value.commentNum,
              name: '新增评论'
            },
            {
              value: countData.value.teamNum,
              name: '新增交流群'
            }
          ]
        }
      ]});

  }

}
const getWeekBlog = async () =>{
  let res = await myAxios.get("/home/countWeek?date=" + Today.value)
  if(res.data.code === 0){
    countWeek.value = res.data.data
    const dateLIst = countWeek.value.dateList.split(',')
    const list = countWeek.value.blogList.split(',')
    const barChart = echarts.init(document.getElementById('weeklyUser'))
    barChart.setOption({
      title: {
        text: '七天新增博文量',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: 50,
        right: 20,
        bottom: 20
      },
      xAxis: {
        type: 'category',
        data: dateLIst,
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '新增量',
          data: list,
          type: 'bar'
        }
      ]
    })
  }
}

const getNum = async () =>{
  let res = await myAxios.get("/home/countLikeAndComment?date=" + Today.value)
  if (res.data.code === 0){
    const dateList = res.data.data.dateList.split(',')
    const likeList = res.data.data.likeList.split(',')
    const commentLIst = res.data.data.commentList.split(',')
    const lineChart = echarts.init(document.getElementById('estimateUser'))
    lineChart.setOption({
      title: {
        text: '七天点赞评论量统计',
        left: 'center'
      },
      xAxis: {
        data: dateList,
        boundaryGap: false,
        axisTick: {
          show: false
        }
      },
      grid: {
        left: 20,
        right: 20,
        bottom: 20,
        top: 80,
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        padding: [5, 10]
      },
      yAxis: {
        axisTick: {
          show: false
        }
      },
      legend: {
        data: ['点赞量', '评论量'],
        top: 50
      },
      series: [
        {
          name: '点赞量',
          smooth: true,
          type: 'line',
          data: likeList,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
          name: '评论量',
          smooth: true,
          type: 'line',
          itemStyle: {},
          data: commentLIst,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }
      ]
    })
  }

}
</script>

<template>
  <el-card shadow="never">
    <el-row :gutter="20">
      <el-avatar
          :src="avatarUrl"
          style="width: 70px;height: 70px"
      />
      <span style="margin-left: 15px;line-height: 70px">你好，{{ username }}，祝你开心每一天!</span>
    </el-row>
  </el-card>
  <el-card shadow="never" style="margin-top: 20px">
    <el-row :gutter="20" justify="space-between">
      <el-col :span="6">
        <div class="statistic-card">
          <el-statistic :value="newUserNum.todayNum">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                今日新增用户
                <el-tooltip
                    effect="dark"
                    content=""
                    placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning/>
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>比昨天</span>
              <div v-if="newUserNum.yesterdayNum>0">
                <div v-if="(newUserNum.todayNum-newUserNum.yesterdayNum)>0">
                <span class="green">
                  {{((newUserNum.todayNum-newUserNum.yesterdayNum)/(newUserNum.yesterdayNum)*100+'%')}}
              <el-icon>
                <CaretTop/>
              </el-icon>
            </span>
                </div>
                <div v-else>
                <span class="red">
                  {{((newUserNum.yesterdayNum-newUserNum.todayNum)/(newUserNum.yesterdayNum)*100+'%')}}
              <el-icon>
                <CaretBottom/>
              </el-icon>
            </span>
                </div>
              </div>
              <div v-else>
                  <span class="red">
                  昨日新增为0
              <el-icon>
                <CaretTop/>
              </el-icon>
                    </span>
              </div>

            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistic-card">
          <el-statistic :value="newUserNum.monthNum">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                30日新增用户
                <el-tooltip
                    effect="dark"
                    content=""
                    placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning/>
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>同期比</span>
              <div v-if="newUserNum.lastMonthNum>0">
                <div v-if="(newUserNum.monthNum-newUserNum.lastMonthNum)>0">
                <span class="green">
                  {{((newUserNum.monthNum-newUserNum.lastMonthNum)/(newUserNum.lastMonthNum)*100+'%')}}
              <el-icon>
                <CaretTop/>
              </el-icon>
            </span>
                </div>
                <div v-else>
                <span class="red">
                  {{((newUserNum.lastMonthNum-newUserNum.monthNum)/(newUserNum.lastMonthNum)*100+'%')}}
              <el-icon>
                <CaretBottom/>
              </el-icon>
            </span>
                </div>
              </div>
              <div v-else>
                  <span class="red">
                  同期新增为0
              <el-icon>
                <CaretTop/>
              </el-icon>
                    </span>
              </div>

            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="statistic-card" style="text-align: center">
          <el-countdown format="DD [days] HH:mm:ss" :value="timeValue">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-icon style="margin-right: 4px" :size="12">
                  <Calendar/>
                </el-icon>
                距离下个月
              </div>
            </template>
          </el-countdown>
          <div class="countdown-footer">{{ timeValue.format('YYYY-MM-DD') }}</div>
        </div>
      </el-col>
    </el-row>
  </el-card>

  <el-row :gutter="20" style="margin-top: 20px">
    <el-col :span="8">
      <el-card shadow="never">
        <div id="pie" style="width: 100%;height: 300px"></div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card shadow="never">
        <div id="weeklyUser" style="width: 100%;height: 300px"></div>
      </el-card>
    </el-col>
  </el-row>
  <el-card shadow="never" style="margin-top: 20px">
    <div id="estimateUser" style="width: 100%;height: 300px"></div>
  </el-card>
</template>

<style scoped>
.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}

.countdown-footer {
  margin-top: 8px;
  text-align: center;
}
</style>
